<script setup lang="ts">

</script>

<template>
    <!-- 图片 -->
    <u-layout
        :enable-refresh="false"
        title="图片组件示例"
    >
        <!-- 容器 -->
        <view class="container">
            <view class="line">
                <view class="block">
                    <view class="ui-block-control">
                        <view class="ui-block">
                            <u-image
                                src="https://assets.ecdata.cn/icon/htui/images/fbc441b1514c2c66e91d6e5178734a9b7db2ec8ccafb5-ysffoX.jpeg"
                            />
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <!-- //容器 -->
    </u-layout>
    <!-- //图片 -->
</template>

<style scoped lang="scss">
    // 容器
    .container
    {
        .line
        {
            .title
            {
                font-size: 14px;
                line-height: 20px;
            }

            .block
            {
                overflow: hidden;

                .ui-block-control
                {
                    display: grid;
                    grid-template-columns: repeat(2, minmax(0, 1fr));
                    grid-gap: 10px;

                    .ui-block
                    {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        height: 100px;
                        overflow: hidden;
                    }
                }
            }

            &:not(:first-child)
            {
                margin-top: 16px;
            }
        }
    }
</style>